<template>
	<default-header-page-layout ref="page" title="分拣查询">
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<view class="scan-input-form-item-compontent">
					<!-- <view class="p-form-label"></text>物料明细</view> -->
					<view class="input-view">
						<u-search 
						clearabled
						@search="getData"
						@custom="getData"
						@clear="clear"
						searchIcon="" 
						:actionStyle="actionStyle" 
						bgColor="#fff" 
						borderColor="#ccc"
						shape="square" 
						placeholder=""
						height="58rpx"
						v-model="form.no"></u-search>
					</view>
				</view>
				<contentCard :noData="noData"/>
				
			</view>


		</view>
	</default-header-page-layout>
</template>

<script>
	import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
	import ActionUserRow from '@/components/ActionUserRow.vue'
	import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
	import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
	import EasyPicker from '@/components/EasyPicker.vue'
	import contentCard from './modules/contentCard.vue'
	import {
		SortPdaPage,
	} from '@/api/slicingOn.js'
	let initInterVal = null;

	export default {
		name: 'emptyInPage',
		components: {
			DefaultHeaderPageLayout,
			ActionUserRow,
			ScanInputFormItem,
			EasySelectFormItem,
			EasyPicker,
			contentCard
		},
		data() {
			return {
				pageBodyHeight: 0,
				form: {
					no: '',
				},
				noData:[],
				actionStyle: {
					backgroundColor: '#F18202',
					color:'#fff',
					width: 120 + 'rpx',
					height: 58 + 'rpx',
					lineHeight: 58 + 'rpx',
					borderRadius: 10 + 'rpx',
				}
			}
		},
		computed: {
			disabled() {
				return this.noData.filter(item => item.checked).length < 1
			}
		},
		methods: {
			// 获取单据信息
			async getData(no) {
				if (no) {
					this.form.no = no
				}
				const param = {
					no: this.form.no
				}
				try {
					let {data} = await SortPdaPage(param)
					this.noData=data.rows
					console.log(this.noData);
					// if (Object.keys(data).includes('message')) {
					// 	this.msg = data.message
					// 	this.msgType = 'error'
					// } else {
					// 	console.log(data);
					// 	this.noAllData = data
					// 	this.noAllData.forEach(item => this.$set(item, 'checked', false))
					// 	this.noData=this.noAllData
					// }

				} catch (e) {
					//TODO handle the exception
					console.log(e, 'e');
				}
			},
			clear(){
				this.form.materialNo=''
			},
			/* 页面初始化获取页面body高度的定时器 */
			startInitInterval(callback) {
				initInterVal = setInterval(() => {
					if (this.pageBodyHeight) {
						this.clearInitInterval()
						callback && callback()
					} else {
						this.pageBodyHeight = this.$refs.page.getBodyHeight()
					}
				}, 200)
			},
			/* 清除定时器 */
			clearInitInterval() {
				try {
					clearInterval(initInterVal)
					initInterVal = null
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		onReady() {
			this.startInitInterval(() => {
				/* 页面初始化后需要执行的代码在这边调用 */
				this.getData()
				// this.getLinesOptions()
				// this.selectOptions.models = getDicList(this.$store,'assemble_taskmodel')
			})
		},
		onUnload() {
			this.clearInitInterval()
		}
	}
</script>

<style scoped lang="scss">
	.forma-item {
		margin-bottom: 24rpx;
	}

	.only-watch-container {
		background-color: #D0DDD8;
		min-height: 90rpx;
		display: flex;

		&>.label {
			color: $u-tips-color;
			font-size: 32rpx;
			flex-shrink: 0;
			padding-left: 20rpx;
			padding-top: 22rpx;
		}

		&>.content {
			width: 1px;
			flex-grow: 1;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 8rpx 0;
		}
	}

	.bottom-btns-row {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #fff;

		.btn-frame {
			width: 1%;
			box-sizing: border-box;
			flex-grow: 1;
		}
	}

	.scan-input-form-item-compontent {
		width: 100%;
		margin-top:50rpx;

		.p-form-label {
			font-size: 32rpx;
			color: $u-tips-color;
			padding-bottom: 12rpx;
			padding-left: 20rpx;
		}

		.input-view {
			padding-left: 20rpx;
			width: 94%;
		}

	}

	::v-deep .u-search__content {
		padding: 0 !important;
	}
</style>